Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Removed Bootstrap classes #1123

Merged
merged 14 commits into from
Dec 6, 2022
Merged

Removed Bootstrap classes #1123

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
2e75edb
Modal: removed Bootstrap classes
Trochonovitz Nov 28, 2022
b8076cd
Backdrop: removed Bootstrap classes
Trochonovitz Nov 28, 2022
3a0e0c2
Stepper: removed Bootstrap classes
Nov 28, 2022
11e2a92
Merge branch 'dev' of https://github.com/mdbootstrap/Tailwind-Element…
Trochonovitz Nov 29, 2022
7998fc3
Modal: rename bs components and fix animations
Trochonovitz Nov 29, 2022
0144143
Tooltip: added Tailwind animations and fix font
Trochonovitz Nov 30, 2022
8975d5e
Tooltip: fix commented code
Trochonovitz Nov 30, 2022
5692a29
Tooltip: fix for Popover styling
Trochonovitz Nov 30, 2022
2af6582
Popover: remove BS classes
Trochonovitz Nov 30, 2022
54aa772
Offcanvas: fix working with Backdrop
Trochonovitz Nov 30, 2022
fa22ae1
Manipulator: add helper function for many classes
Trochonovitz Nov 30, 2022
d9df333
Backdrop: add shortcut for adding many classes
Trochonovitz Nov 30, 2022
9a86214
Change helper function name
Trochonovitz Dec 5, 2022
baafee6
Animations: added keyframes
Trochonovitz Dec 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
326 changes: 210 additions & 116 deletions demo/sites/bs/modal.html
View file
Open in desktop

Large diffs are not rendered by default.

44 changes: 22 additions & 22 deletions demo/sites/bs/popover.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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
>

Expand All @@ -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"
Expand All @@ -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);
Expand Down
26 changes: 13 additions & 13 deletions demo/sites/bs/tooltip.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
>
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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"
Expand All @@ -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);
Expand Down
64 changes: 32 additions & 32 deletions demo/sites/mdb/stepper.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
Loading